
import React, { useState } from "react";
import { Button, Form, Input, Table, Pagination } from 'antd';
import { SearchOutlined, ReloadOutlined } from '@ant-design/icons';
import type { TableColumnsType } from 'antd';
import type { FormProps } from 'antd';
import Common from "@/components/common/index"
import { getUsers } from "@/common/api"
import type { PaginationProps } from 'antd';
import "./home.scss"

const Home: React.FC = () => {
    type FieldType = {
        username?: string;
        password?: string;
    };
    const [loadings, setLoadings] = useState<boolean>(false);
    const [tableData, setTableData] = useState<any[]>([]);

    const [form] = Form.useForm();
    const onFinish: FormProps<FieldType>['onFinish'] = (values) => {
        // console.log(values, '99999999');
        setLoadings(true)
        let param = {
            ...values,
            pageSize: pageSize,
            pageNum: pageNum
        }
        getUsers(param).then((res: any) => {
            console.log(res.data, '9999999')
            const datas = [...res.data.records]
            setTableData(datas)
            setLoadings(false)
        })
    };

    const getTop = () => {
        return <Form
            layout="inline"
            form={form}
            onFinish={onFinish}
            autoComplete="off"
        >
            <Form.Item name="userName" label="用户名:">
                <Input placeholder="请输入用户名" />
            </Form.Item>
            <Form.Item name="department" label="部门:">
                <Input placeholder="请输入部门" />
            </Form.Item>
            <Form.Item>
                <Button icon={<SearchOutlined />} type="primary" htmlType="submit" loading={loadings}>查询</Button>
            </Form.Item>
            <Form.Item>
                <Button icon={<ReloadOutlined />} onClick={() => {
                    form.resetFields();
                }} loading={loadings}>重置</Button>
            </Form.Item>
        </Form>
    }
    const columns: TableColumnsType = [
        {
            title: '用户名',
            dataIndex: 'userName',
            width: "",
        },
        {
            title: '账户类型',
            dataIndex: 'userType',
            width: "",
        },
        {
            title: '角色',
            dataIndex: 'userRole',
            width: "",
        },
        {
            title: '真实姓名',
            dataIndex: 'realName',
            width: "",
        },
        {
            title: '部门',
            dataIndex: 'department',
            width: "",
        },
        {
            title: '手机',
            dataIndex: 'phoneNumber',
            width: "",
        },
        {
            title: '电子邮箱',
            dataIndex: 'userMail',
            width: 120,
            fixed: 'right',
        },
    ];



    const getTable = () => {
        return <Table
            columns={columns}
            dataSource={tableData}
            scroll={{ x: 'max-content' }}
            pagination={false}
            sticky={true}
            style={{ height: '90%', overflowY: 'auto' }}
        />
    }

    const [pageSize, setPageSize] = useState<number>(20);
    const [pageNum, setPageNum] = useState<number>(1);
    const onChange: PaginationProps['onChange'] = (page, pageSize) => {
        console.log(page, '99999999999')
        console.log(pageSize, '1111111111')
        setPageNum(page)
        setPageSize(pageSize)
    }
    const getPagination = () => {
        return <Pagination
            size="small"
            total={85}
            showSizeChanger
            showQuickJumper
            showTotal={(total) => `共 ${total} 条`}
            onChange={onChange}
        />
    }


    return <>
        <Common top={getTop()} table={getTable()} paginations={getPagination()} />
    </>
}


export default Home